<template>
  <div class="page-container">
    <!-- <van-nav-bar title="成功案例" left-text="" right-text="" /> -->
    <van-image
      width="100%"
      height="225"
      :src="require('@/assets/case_header.jpg')"
    />
    <div class="goods-list__title">点击案例看验光报告和养眼记录</div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length === 0 ? '暂无数据' : '没有更多了'"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id">
          <div slot="default">
            <div class="goods-container">
              <van-row class="content-box" @click.native="showDetail(item)">
                <div class="content-name">{{ item.title }}</div>
              </van-row>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-tabbar
      v-model="tabbarActive"
      class="page-tottom-tabbar"
      @change="changeTabbar"
    >
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="case" icon="star-o">数据</van-tabbar-item>
      <van-tabbar-item name="package" icon="bag-o">订单</van-tabbar-item>
      <van-tabbar-item name="personal" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { casesList } from '@/api/store'
import {
  Button,
  Tabbar,
  TabbarItem,
  Swipe,
  SwipeItem,
  List,
  PullRefresh,
  Card,
  Tag,
  ImagePreview
} from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Card.name]: Card,
    [Tag.name]: Tag,
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data() {
    return {
      tabbarActive: 'case',
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      filterData: {
        limit: 10,
        page: 0
      }
    }
  },
  methods: {
    // 列表
    getList(refresh) {
      const _self = this
      casesList(this.filterData).then((res) => {
        if (res.error.code === 0) {
          // 加载状态结束
          _self.loading = false
          // 数据全部加载完成
          if (refresh === 'refresh') {
            const tempList = res.data.list
            tempList.forEach((element, index, array) => {
              element.title = '案例' + (index + 1) + '：' + element.title
            })
            this.list = tempList
          } else {
            const tempList = [...this.list, ...res.data.list]
            tempList.forEach((element, index, array) => {
              element.title = '案例' + (index + 1) + '：' + element.title
            })
            this.list = tempList
          }
          if (this.list.length >= res.data.totalCount) {
            _self.finished = true
          } else {
            _self.finished = false
          }
        }
      })
    },
    onLoad() {
      this.filterData.page += 1
      this.getList()
    },
    onRefresh() {
      this.refreshing = false
      this.finished = true // 防止下拉刷新发送了两次请求的问题
      this.filterData.page = 1
      this.getList('refresh')
      this.list = []
    },
    // 切换菜单
    changeTabbar(e) {
      if (e === 'home') {
        this.$router.push({ name: 'home' })
      } else if (e === 'case') {
        this.$router.push({ name: 'case' })
      } else if (e === 'package') {
        this.$router.push({ name: 'package' })
      } else if (e === 'personal') {
        this.$router.push({ name: 'personal' })
      }
    },
    // 展开详情
    showDetail(item) {
      ImagePreview({
        images: item.img_list,
        closeable: true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.van-pull-refresh {
  .van-list {
    min-height: calc(100vh - 310px); // 225+50+30+20(不知道哪来的)
  }
}
.page-container {
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}
.goods-list__title {
  padding: 5px 0 5px 5px;
}
.goods-container {
  padding: 5px;
  position: relative;
}
.content-box {
  background-color: #fff;
}
.van-cell {
  margin-bottom: 10px;
  border-radius: 3px;
  padding: 0;
}
.van-list .van-cell {
  box-shadow: 0px 10px 13px -13px #c7d3ed;
}
.van-cell:not(:last-child)::after {
  border-bottom: 0;
}
.content-name {
  font-size: 16px;
}
</style>
